Jqueryuery基础 (一)—样式篇 jQueryHelloWorld体验
HTML代码/文本/值 1 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
1 2 3 4 5 val 用于设定HTML内容的值 function(index, html) 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值
1 $("p").html("Hello <b>world</b>!");
1 2 3 $("p").html(function(n){ return "这个 p 元素的 index 是：" + n; });
#jQuery对象与DOM对象
1 2 3 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <!-- 使用JS原生语法 --> <script type="text/javascript" > window .onload = function ( var p = document .getElementById('imooc1' ); p.innerHTML = 'P1：您好！通过慕课网学习jQuery才是最佳的途径' ; p.style.color = 'red' ; } </script> <!-- 使用jQuery语法 --> <script type="text/ javascript"> $(document).ready(function() { /** * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象 * 调用该对象的html()方法进行更改内容 * 调用该对象的css()方法进行更改颜色样式 */ var $p = $('#imooc2'); $p.html('P2：您好！通过慕课网学习jQuery才是最佳的途径').css('color','red'); }); </script> </head> <body> <p id=" imooc1"></p> <p id=" imooc2"></p> </body>
jQuery的处理：
1 2 var $p = $('#imooc'); $p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');
通过$(‘#imooc’)方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。
jQuery对象转化成DOM对象 jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
如何把jQuery对象转成DOM对象？
利用数组下标的方式读取到jQuery中的DOM对象
HTML代码
1 2 3 <div>元素一</div> <div>元素二</div> <div>元素三</div>
JavaScript代码
1 2 3 var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性
用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0
通过jQuery自带的get()方法
jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：
1 2 3 var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 div.style.color = 'red' //操作dom对象的属性
DOM对象转化成jQuery对象 相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。
1 如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了
1 2 3 <div>元素一</div> <div>元素二</div> <div>元素三</div>
1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript" > var div = document .getElementsByTagName('div' ); var $div = $(div); var $first = $div.first(); $first.css('color' , 'red' );
jQuery选择器之id选择器 id选择器：一个用来查找的ID，即元素的id属性
id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器
1 id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 iv id="imooc" > <p>id="imooc"</p> <p>jQuery选中</p> </div> <div id="imooc" > <p>id="imooc"</p> <p>jQuery未选中</p> </div> <script type="text/javascript" > var div = document.getElementById('aaron' ); div.style.border = "3px solid blue" ; </script> <script type="text/javascript" > $("imooc" ).css("border" , "3px solid red" ); </script>
#jQuery选择器之类选择器
类选择器，顾名思义，通过class样式类名来获取节点
描述：
类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选
1 jQuery除了选择上的简单，而且没有再次使用循环处理
jQuery的选择器之元素选择器 元素选择器：根据给定（HTML）标记名称选择所有的元素
描述：
搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法的getElementsByTagName（）函数支持
第一组：通过的getElementsByTagName方法得到页面所有的
元素
1 var divs = document.getElementsByTagName（'div'）;
的div是DOM合集对象，通过循环给每一个合集中的
元素赋予新的边界样式
第二组：同样的效果，$（ “P”）选取所有的
元素，通过CSS方法直接赋予样式
jQuery选择器之全选择器（*选择器） 在CSS中，经常会在第一行写下这样一段样式
1 * {padding: 0; margin: 0;}
通配符意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递 选择器来选中文档页面中的元素
描述：
jQuery选择器之层级选择器 文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。
选择器中的层级选择器就是用来处理这种关系
通过一个列表，对比层级选择器的区别
仔细观察层级选择器之间还是有很多相似与不同点
层级选择器都有一个参考节点
后代选择器包含子选择器的选择的内容
一般兄弟选择器包含相邻兄弟选择的内容
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下
子选择器与后代选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div class ="left" > <div class ="aaron" > <p > div下的第一个p元素</p > </div > <div class ="aaron" > <p > div下的第一个p元素</p > </div > </div > <div class ="right" > <div class ="imooc" > <article > <p > div下的article下的p元素</p > </article > </div > <div class ="imooc" > <article > <p > div下的article下的p元素</p > </article > </div > </div >
1 2 3 4 5 <script type="text/javascript" > $('div > p' ).css("border" , "1px groove blue" ); </script>
1 2 3 4 5 <script type="text/javascript" > $('div p' ).css("border" , "1px groove red" ); </script>
相邻兄弟选择器与一般兄弟选择器
1 2 3 4 5 6 7 8 9 10 11 <h2 > 相邻兄弟选择器与一般兄弟选择器</h2 > <div class ="bottom" > <div > 兄弟节点div, +~选择器不能向前选择</div > <span class ="prev" > 选择器span元素</span > <div > span后第一个兄弟节点div</div > <div > 兄弟节点div <div class ="small" > 子元素div</div > </div > <span > 兄弟节点span,不可选</span > <div > 兄弟节点div</div > </div >
1 2 3 4 5 <script type ="text/javascript" > $(".prev+div" ).css("border" , "3px groove blue" ); </script >
1 2 3 4 5 <script type ="text/javascript" > $(".prev ~ div" ).css("border" , "3px groove yellow" ); </script >
jQuery选择器之基本筛选选择器 筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，通过一个列表，看看基本筛选器的描述：
注意事项：
:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始
—
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <body > <h2 > 基本筛选器</h2 > <h3 > :first/:last/:even/:odd</h3 > <div class ="left" > <div class ="div" > <p > div:first</p > <p > :even</p > </div > <div class ="div" > <p > :odd</p > </div > <div class ="div" > <p > :even</p > </div > <div class ="div" > <p > :odd</p > </div > <div class ="div" > <p > :even</p > </div > <div class ="div" > <p > div:last</p > <p > :odd</p > </div > </div >
1 2 3 4 <script type ="text/javascript" > $(".div:first" ).css("color" , "#CD00CE" ); </script >
1 2 3 4 <script type ="text/javascript" > $(".div:last" ).css("color" , "#CD00CE" ); </script >
1 2 3 4 <script type ="text/javascript" > $(".div:even" ).css("color" , "#CD00CE" ); </script >
1 2 3 4 <script type ="text/javascript" > $(".div:odd" ).css("color" , "#CD00CE" ); </script >
注意 过滤器都是在div里面过滤的 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <h3 > :eq/:gt/:lt</h3 > <div class ="left" > <div class ="aaron" > <p > :lt(3)</p > </div > <div class ="aaron" > <p > :lt(3)</p > </div > <div class ="aaron" > <p > :eq(2)</p > </div > <div class ="aaron" > </div > <div class ="aaron" > <p > :gt(3)</p > </div > <div class ="aaron" > <p > :gt(3)</p > </div > </div >
1 2 3 4 5 <script type ="text/javascript" > $(".aaron:eq(2)" ).css("border" , "3px groove blue" ); </script >
1 2 3 4 <script type ="text/javascript" > $(".aaron:gt(2)" ).css("border" , "3px groove blue" ); </script >
1 2 3 4 5 <script type ="text/javascript" > $(".aaron:gt(2)" ).css("color" , "#CD00CD" ); </script >
1 2 3 4 5 6 <script type ="text/javascript" > $("input:not(:checked) + p" ).css("background-color" , "#CD00CD" ); </script >
jQuery选择器之内容筛选选择器 基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上
内容过滤器描述如下表：
注意事项：
:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <h2 > 内容筛选器</h2 > <h3 > :contains/:has</h3 > <div class ="left" > <div class ="div" > <p > :contains</p > </div > <div class ="div" > <p > :contains</p > </div > <div class ="div" > <p > <span > :has</span > </p > </div > <div class ="div" > <p > :contains</p > </div > </div >
1 2 3 4 5 <script type ="text/javascript" > $(".div:contains(':contains')" ).css("color" , "#CD00CD" ); </script >
1 2 3 4 5 6 <script type ="text/javascript" > $(".div:has(span)" ).css("color" , "blue" ); </script >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h3 > :parent/:empty</h3 > <div class ="left" > <div class ="aaron" > <a > :parent</a > </div > <div class ="aaron" > <a > :parent</a > </div > <div class ="aaron" > <a > :parent</a > </div > <div class ="aaron" > <a > </a > </div > </div >
1 2 3 4 5 <script type ="text/javascript" > $("a:parent" ).css("border" , "3px groove blue" ); </script >
1 2 3 4 5 <script type="text/javascript" > $("a:empty" ).text(":empty" ).css("border" , "3px groove red" ); </script>
jQuery选择器之可见性筛选选择器 元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden
描述如下：
这2个选择器都是 jQuery 延伸出来的，看起来比较简单，但是元素可见性依赖于适用的样式
1 :hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等
我们有几种方式可以隐藏一个元素：
CSS display的值是none。
type=”hidden”的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0
1 2 3 如果元素中占据文档中一定的空间,元素被认为是可见的。 可见元素的宽度或高度，是大于零。 元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <h2 > 可见性筛选选择器</h2 > <h3 > :visible/:hidden</h3 > <div class ="left" > <div class ="div" > <a > display</a > <p id ="div1" style ="display:none;" > display</p > </div > <div class ="div" > <a > width</a > <a > height</a > <p id ="div2" style ="width:0;height:0" > width/height</p > </div > <div class ="div" > <a > visibility</a > <a > opacity</a > <p id ="div3" style ="visibility:hidden;opacity:0" > visibility</p > </div > </div > <p id ="show" > </p >
1 2 3 4 5 6 7 8 9 <script type="text/javascript" > show( '#div3:visible' ); </script> <script type="text/ javascript"> //查找id = div1的DOM元素,是否隐藏 show( '#div1:hidden; ); </script>
jQuery选择器之属性筛选选择器 属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。
1 2 3 4 在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <h2 > 属性筛选选择器</h2 > <h3 > [att=val]、[att]、[att|=val]、[att~=val]</h3 > <div class ="left" testattr ="true" > <div class ="div" testattr ="true" name ='p1' > <a > [att=val]</a > </div > <div class ="div" testattr ="true" p2 > <a > [att]</a > </div > <div class ="div" testattr ="true" name ="-" > <a > [att|=val]</a > </div > <div class ="div" testattr ="true" name ="a b" > <a > [att~=val]</a > </div > </div >
1 2 3 4 <script type ="text/javascript" > //查找所有div中，属性name=p1的div元素 <div class ="div" testattr ="true" name ='p1' > $('div[name=p1]' ).css("border" , "3px groove red" ); </script >
1 2 3 4 <script type ="text/javascript" > //查找所有div中，有属性p2的div元素 <div class ="div" testattr ="true" p2 > $('div[p2]' ).css("border" , "3px groove blue" ); </script >
1 2 3 4 <script type ="text/javascript" > $('div[name|="-"]' ).css("border" , "3px groove #00FF00" ); </script >
1 2 3 4 <script type ="text/javascript" > $('div[name~="a"]' ).css("border" , "3px groove #668B8B" ); </script >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h3 > [att^=val]、[att*=val]、[att$=val]、[att!=val]</h3 > <div class ="left" testattr ="true" > <div class ="div" testattr ="true" name ='imooc-aaorn' > <a > [att^=val]</a > </div > <div class ="div" testattr ="true" name ='aaorn-imooc' > <a > [att$=val]</a > </div > <div class ="div" testattr ="true" name ="attr-test-selector" > <a > [att*=val]</a > </div > <div class ="div" name ="a b" > <a > [att!=val]</a > </div > </div >
1 2 3 4 5 6 7 8 9 <script type ="text/javascript" > $('div[name^=imooc]' ).css("border" , "3px groove red" ); </script > <script type ="text/javascript" > $('div[name$=imooc]' ).css("border" , "3px groove blue" ); </script >
<script type="text/javascript">
//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div*=test').css("border", "3px groove #00FF00");
</script>1 2 3 4 <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个test字符串的div元素 $('div*=test').css("border", "3px groove #00FF00"); </script>
jQuery选择器之子元素筛选选择器 子元素筛选选择器不常使用，其筛选规则比起其它的选择器稍微要复杂点
注意事项：
:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
如果子元素只有一个的话，:first-child与:last-child是同一个
:only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算
1 2 3 4 5 <script type="text/javascript"> //查找class="first-div"下的第一个a元素 //针对所有父级下的第一个 $('.first-div a:first-child').css("color", "#CD00CD"); </script>
1 2 3 4 5 6 <script type="text/javascript"> //查找class="first-div"下的最后一个a元素 //针对所有父级下的最后一个 //如果只有一个元素的话，last也是第一个元素 $('.first-div a:last-child').css("color", "red"); </script>
1 2 3 4 5 <script type="text/javascript"> //查找class="first-div"下的只有一个子元素的a元素 $('.first-div a:only-child').css("color", "blue"); </script>
1 2 3 4 <script type="text/javascript"> //查找class="last-div"下的第二个a元素 $('.last-div a:nth-child(2)').css("color", "#CD00CD"); </script>
1 2 3 4 <script type="text/javascript"> //查找class="last-div"下的倒数第二个a元素 $('.last-div a:nth-last-child(2)'.css("color", "red"); </script>
jQuery选择器之表单元素选择器 无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素
表单选择器的具体方法描述：
除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(‘:password’) == $(‘[type=password]’)
子元素筛选选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h3 > input、text、password、radio、checkbox</h3 > <h3 > submit、image、reset、button、file</h3 > <div class ="left first-div" > <form > <input type ="text" value ="text类型" /> <input type ="password" value ="password" /> <input type ="radio" /> <input type ="checkbox" /> <input type ="submit" /> <input type ="image" /> <input type ="reset" /> <input type ="button" value ="Button" /> <input type ="file" /> </form > </div >
1 2 3 4 5 <script type ="text/javascript" > $(':input' ).css("border" , "1px groove red" ); </script >
jQuery选择器之表单对象属性筛选选择器 除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选
注意事项：
选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
在某些浏览器中，选择器:checked可能会错误选取到元素，所以保险起见换用选择器input:checked，确保只会选取
1 2 3 4 5 <form > <input type ="text" value ="未设置disabled" /> <input type ="text" value ="设置disabled" disabled ="disabled" /> <input type ="text" value ="未设置disabled" /> </form >
1 2 3 4 5 6 7 8 9 10 <script type ="text/javascript" > $('input:enabled' ).css("border" , "2px groove red" ); </script > <script type ="text/javascript" > $('input:disabled' ).css("border" , "2px groove blue" ); </script >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h3 > checked、selected</h3 > <form > <input type ="checkbox" checked ="checked" > <input type ="checkbox" > <input type ="radio" checked > <input type ="radio" > <select name ="garden" multiple ="multiple" > <option > imooc</option > <option selected ="selected" > 慕课网</option > <option > aaron</option > <option selected ="selected" > 博客园</option > </select > </form >
1 2 3 4 5 6 <script type ="text/javascript" > $('input:checked' ).removeAttr('checked' ) </script >
1 2 3 4 5 <script type ="text/javascript" > $('input:selected' ).removeAttr('selected' ) </script >
jQuery选择器之特殊选择器this 相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢
this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者
1 2 3 4 5 6 7 8 var imooc = { name:"慕课网", getName:function(){ //this,就是imooc对象 return this.name; } } imooc.getName(); //慕课网
当然在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)，具体的大家可以查阅相关资料
同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用
假如给页面一个P元素绑定一个事件:
1 2 3 4 5 6 p.addEventListener('click',function(){ //this === p //以下两者的修改都是等价的 this.style.color = "red"; p.style.color = "red"; },false);
通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可
1 this.style.color = "red"
但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象
1 2 3 4 5 $('p').click(function(){ //把p元素转化成jQuery的对象 var $this= $(this) $this.css('color','red') })
通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了
1 2 this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。 $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <h2 > 特殊选择器this</h2 > <p id ="test1" > 点击测试：通过原生DOM处理</p > <p id ="test2" > 点击测试：通过原生jQuery处理</p > <script type ="text/javascript" > var p1 = document .getElementById('test1' ) p1.addEventListener('click' ,function ( this .style.color = "red" ; },false ); </script > <script type ="text/javascript" > $('#test2' ).click(function ( $(this ).css('color' ,'blue' ); }) </script >
jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。
操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题
1 jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()
attr()有4个表达式
attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
优点：
attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题
注意的问题：
dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性
例如：html中常用的id、class、title、align等：
1 <div id="immooc" title="慕课网"></div>
而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等
1 获取Attribute就需要用attr，获取Property就需要用prop
1 2 3 4 5 6 7 8 <h2 > .attr()与.removeAttr()</h2 > <h3 > .attr</h3 > <form > <input type ="text" value ="设置value" /> <input type ="text" value ="获取value" /> <input type ="text" value ="回调拼接value" /> <input type ="text" value ="删除value" /> </form >
1 2 3 4 <script type ="text/javascript" > $("input:first" ).attr('value' ,'.attr( attributeName, value )' ) </script >
1 2 3 4 5 <script type ="text/javascript" > var $atr=$('input:eq(1)' ).attr('value' ); alert($atr); </script >
1 2 3 4 5 6 7 8 <script type ="text/javascript" > $('input:eq(2)' ).attr('value' ,function (i, val ) return '通过function设置' + val }) </script >
1 2 3 4 5 6 7 <script type ="text/javascript" > $('input:eq(3)' ).removeAttr('value' ) </script > 1:属性名称。 2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
jQuery的属性与样式之html()及.text() 读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text()
.html()方法
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：
.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
.html( htmlString ) 设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
1 .html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
.text()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：
.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数
注意事项：
1 .text()结果返回一个字符串，包含所有匹配元素的合并文本
.html与.text的异同:
.html与.text的方法操作是一样，只是在具体针对处理对象不同
.html处理的是元素内容，.text处理的是文本内容
.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <h3 > .html()与.text()</h3 > <div class ="left first-div" > <div class ="div" > <a > :first-child</a > <a > 第二个元素</a > <a > :last-child</a > </div > <div class ="div" > <a > :first-child</a > <a > 第二个元素</a > <a > :last-child</a > </div > </div > <h4 > 显示通过html方法获取到的内容</h4 > <p > </p > <h4 > 显示通过text方法获取到的内容</h4 > <p > </p >
1 2 3 4 5 6 <script type ="text/javascript" > $('p:first' ).text( $(".first-div" ).html()); </script >
1 2 3 4 5 <script type ="text/javascript" > $('p:last' ).text( $(".first-div" ).text() ) </script >
1 2 3 4 <script type ="text/javascript" > $(".left a:first" ).html('替换第一个a元素的内容' ) </script >
1 2 3 4 5 6 7 8 9 10 11 12 <script type ="text/javascript" > $(".left div:first" ).html('整个div的子节点都被替换了' ) </script > <script type ="text/javascript" > $(".left a:first" ).text(function (idnex,text ) return '增加新的文本内容' + text }) </script >
jQuery的属性与样式之.val() 1 jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。
.val()方法
.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数
注意事项：
通过.val()处理select元素， 当没有选择项被选中，它返回null
.val()方法多用来设置表单的字段的值
如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值
.html(),.text()和.val()的差异总结：
.html(),.text(),.val()三种方法都是用来读取选定元素的内容；
只不过.html()是用来读取元素的html内容（包括html标签），
.text()用来读取元素的纯文本内容，包括其后代元素，
.val()是用来读取表单元素的”value”值。
其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；
另外.html()方法使用在多个元素上时，只读取第一个元素；
.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的”value”值，
但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <select id ="single" > <option > 慕课网</option > <option > 博客园</option > </select > <select id ="multiple" multiple ="multiple" > <option selected ="selected" > imocc</option > <option > 慕课网</option > <option selected ="selected" > 博客园</option > </select > <input type ="text" value ="click a button" /> <p > </p > <script type ="text/javascript" > $("p" ).text( $("#single" ).val() ) </script > <script type ="text/javascript" > $("p" ).text( $("#multiple" ).val() ) </script > <script type ="text/javascript" > $("input[type='text']" ).val('修改表单的字段' ) </script >
#jQuery的属性与样式之增加样式.addClass()
jQuery的属性与样式之删除样式.removeClass() jQuery的属性与样式之切换样式.toggleClass() #jQuery的属性与样式之样式操作.css()
jQuery的属性与样式之.css()与.addClass()设置样式的区别 jQuery的属性与样式之元素的数据存储
